/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <!-- 底部横幅 -->
  <div
    class="bottom-container"
    :style="{
      bottom: bottomAvoidArea ? bottomAvoidArea + 'px' : '15px',
    }"
  >
    <div class="song-img-and-info">
      <img
        :src="require('../../../assets/playList/cover.png')"
        class="album-cover"
      />
      <div class="song-info">
        <div class="song-title">{{ song.title }}</div>
        <div class="song-artist">{{ song.artist }}</div>
      </div>
    </div>

    <div style="flex: 1"></div>
    <div :class="{ 'all-icon': isLargerPage }">
      <div
        ref="iconContainer"
        data-priority-status="true"
        :style="{
          'flex-direction': 'row',
          'justify-content': 'space-between',
          'align-items': 'center',
          display: 'flex',
          height: '48px',
          width: displayPriorityBoxWidth + 'px',
          left: displayPriorityBoxLeft + 'px',
        }"
      >
        <div
          v-for="(icon, index) in icons"
          :key="index"
          :data-display-priority="icon.priority"
          class="icon-container"
        >
          <img
            :src="require('../../../assets/playList/' + icon.source)"
            :style="icon.style"
          />
        </div>
      </div>
    </div>

    <img
      v-if="isLargerPage"
      :src="require('../../../assets/playList/love_icon.svg')"
      style="width: 24px; height: 24px"
    />
  </div>
</template>

<script lang="ts">
import {
  initializeDisplayPriorityLayout,
  DisplayPriorityLayout,
  BreakpointManager,
} from '@hadss/web_adaptive_layout_ui';

export default {
  name: 'CurPlaySong',
  props: {
    song: {
      type: Object,
      required: true,
    },
    bottomAvoidArea: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 图标
      icons: [
        {
          priority: 1,
          source: 'play_mode.png',
          style: { width: '24px', height: '24px' },
        },
        {
          priority: 1,
          source: 'control_left.png',
          style: {
            width: '28px',
            height: '28px',
            right: this.iconSpace + 'px',
          },
        },
        {
          priority: 10,
          source: 'play_icon.png',
          style: { width: '24px', height: '24px' },
        },
        {
          priority: 1,
          source: 'control_right.png',
          style: {
            width: '28px',
            height: '28px',
            left: this.iconSpace + 'px',
          },
        },
        {
          priority: 10,
          source: 'play_list_icon.png',
          style: { width: '24px', height: '24px' },
        },
      ],
      // 显示和隐藏对象
      displayPriorityLayout: null,
      containerRef: null,
      //  断点对象
      unsubscribe: null,
      breakpointManager: new BreakpointManager(),
      // 横幅中所有的图标的总宽度.用于显示和隐藏
      displayPriorityBoxWidth: 0,
      // 横幅中所有的图标的距离边距
      displayPriorityBoxLeft: 0,
      //是否是pad以及是否比pad屏幕要大
      isLargerPage: false,
      // 图标之间的间距
      iconSpace: 0,
    };
  },
  mounted() {
    // 显示和隐藏
    this.containerRef = this.$refs.iconContainer;
    this.displayPriorityLayout = new DisplayPriorityLayout(this.containerRef);
    this.displayPriorityLayout.initializeLayout();
    // 断点
    this.unsubscribe = this.breakpointManager.subscribeToBreakpoint(() => {
      this.displayPriorityBoxWidth = this.breakpointManager.useBreakpointValue({
        xs: 70,
        sm: 70,
        md: 212,
        lg: 310,
        xl: 310,
      });
      this.displayPriorityBoxLeft = this.breakpointManager.useBreakpointValue({
        xs: 0,
        sm: 0,
        md: 0,
        lg: -350,
        xl: -600,
      });
      this.isLargerPage = this.breakpointManager.useBreakpointValue({
        md: false,
        lg: true,
      });
      this.iconSpace = this.breakpointManager.useBreakpointValue({
        md: 0,
        lg: 20,
      });
    });
  },
  beforeDestroy() {
    // 销毁显隐对象
    this.displayPriorityLayout?.destroy();
    // 销毁断点对象
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  },
};
</script>

<style scoped>
.bottom-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
  height: 48px;
  background-color: rgb(241, 243, 245);
  padding-right: 20px;
  margin-left: 8px;
  margin-right: 8px;
  position: absolute;
  width: -webkit-fill-available;
}

.album-cover {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  margin-left: 8px;
}

.song-img-and-info {
  display: flex;
  text-align: justify;
}

.song-info {
  width: max-content;
  margin-left: 8px;
}

.song-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.9);
}

.song-artist {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 13px;
}

.icon-container {
  align-items: center;
  width: 25px;
}

.all-icon {
  width: 100%;
  justify-items: center;
}
</style>
